<template>
    <div class="main-center cross-center app-avatar" :class="[{ 'round': props.round }]"
        :style="{ width: `${props.size}px`, height: `${props.size}px` }">
        <img :src="props.src" />
    </div>
</template>

<script setup lang="ts" name="AppAvatar">

/**
 * 头像组件
 * @property {string} src 头像地址
 * @property {number | string} [size=50] 尺寸(单位px)
 * @property {boolean} [round=false] 是否圆角
 * @example <AppAvatar src="htpp://xxxx.xxx"></AppAvatar>
 */

export type AppAvatarProps = {
    /**头像地址 */
    src: string
    /*尺寸(单位px) */
    size?: number | string
    /**是否圆角 */
    round?: boolean
}

const props = withDefaults(defineProps<AppAvatarProps>(), {
    size: 50,
    round: false,
})
</script>

<style lang='scss' scoped>
.app-avatar {
    overflow: hidden;
    border-radius: 8px;

    &.round {
        border-radius: 50%;
    }

    img {
        width: 100%;
        height: 100%;
    }
}
</style>